<!-- 头部 -->
<template>
  <div id="antiknock-header">
    <div class="center-left display-flex ai-center jc-space-evenly">
      <div class="center-left-l display-flex ai-center">
        <el-button type="text" @click="$router.push({ path: '/screen/iot' })"
          ><img src="@/assets/images/antiknock/back.png" alt="" srcset=""
        /></el-button>
      </div>
      <div class="center-left-r display-flex ai-center">
        <div class="center-left-r-timing">{{ timing }}</div>
        <div class="center-left-r-day display-flex fd-column">
          <span>{{ day }}</span>
          <span>{{ date }}</span>
        </div>
      </div>
    </div>
    <div class="center-title">抗爆柜物联监测</div>
    <div class="center-right display-flex ai-center jc-flex-end">
      <div class="center-right-l display-flex ai-center" v-if="isShow">
        <!-- <div class="center-right-l-city">{{ dataWeather.city }}</div> -->
        <div class="center-right-l-temp">{{ dataWeather.peraturetemp }}</div>
        <div class="center-right-l-weather display-flex fd-column">
          <img
            v-if="dataWeather.icontemp"
            :src="dataWeather.icontemp"
            alt="QWeather Icons"
            width="30"
            height="30"
          />
          <span>天气：{{ dataWeather.weathertemp }}</span>
        </div>
      </div>
      <div class="center-right-r display-flex ai-center">
        <el-button class="mr-30" type="text" @click="onFullScreen"
          ><img
            style="width: 40px; height: 40px"
            :src="fullscreen ? efs : fs"
            alt=""
            srcset=""
        /></el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import fs from "@/assets/images/iot/full-screen.png";
import efs from "@/assets/images/iot/exit-full-screen.png";
import screenfull from "screenfull";
import $ from "jquery";
import { weatherOption } from "@/utils/index";
export default {
  name: "antiknock-header",
  components: {},
  data() {
    return {
      fs,
      efs,
      date: this.$moment().format("YYYY/MM/DD"),
      timing: this.$moment().format("HH:mm:ss"),
      time: this.$moment().format("YYYY/MM/DD HH:mm:ss"),
      fullscreen: true,
      isShow: false,
      dataWeather: {
        city: "",
        dayweather: "",
        nightweather: "",
        weathertemp: "", // 根据时间判断选白天还是晚上的天气
        nighttemp: "",
        daytemp: "",
        peraturetemp: "", // 根据时间判断选白天还是晚上的温度
        icontemp: "",
      },
    };
  },
  computed: {
    ...mapState({
      username: (state) => state.userInfo.name || "",
    }),
    day() {
      const day = Number(this.$moment(this.time).format("e"));
      switch (day) {
        case 0:
          return "星期一";
        case 1:
          return "星期二";
        case 2:
          return "星期三";
        case 3:
          return "星期四";
        case 4:
          return "星期五";
        case 5:
          return "星期六";
        case 6:
          return "星期日";
        default:
          return "星期";
      }
    },
  },
  async mounted() {
    try {
      this.timer = setInterval(() => {
        this.time = this.$moment().format("YYYY/MM/DD HH:mm:ss");
        this.date = this.$moment().format("YYYY/MM/DD");
        this.timing = this.$moment().format("HH:mm:ss");
      }, 1000);
      const element = document.documentElement; // 设置后就是我们平时的整个页面全屏效果
      if (document.webkitIsFullScreen && element.requestFullscreen()) {
        const res = await element.requestFullscreen();
        console.log("res", res);
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        // IE11
        element.msRequestFullscreen();
      }
      // 解决按f11时图标不变化的问题
      window.addEventListener("keydown", this.KeyDown, true); // 监听按键事件
    } catch (err) {
      console.log("err", err);
    }
    this.requestGetWeather();
  },
  methods: {
    KeyDown(event) {
      if (event.keyCode === 122) {
        // 禁用f11
        event.returnValue = false;
        // 触发全屏的按钮
        this.onFullScreen();
      }
    },
    //
    onFullScreen() {
      if (!screenfull.isEnabled) {
        this.$message.warning("您的浏览器不支持全屏，请更换浏览器再试~");
        return false;
      }
      screenfull.toggle();
      screenfull.onchange(() => {
        this.fullscreen = screenfull.isFullscreen;
      });
    },
    // 监听是否全屏状态
    onresize() {
      // 利用屏幕分辨率和window对象的内高度来判断兼容IE
      const winFlag = window.innerHeight === window.screen.height;
      // 利用window全屏标识来判断 -- IE无效
      const isFull = window.fullScreen || document.webkitIsFullScreen;

      if (isFull === undefined) {
        this.fullscreen = winFlag;
      } else {
        this.fullscreen = winFlag || isFull;
      }
    },
    /**
     * 退出登录
     */
    loginOut() {
      this.$confirm("你确认要退出登录吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.location.href = "/auth_login";
          setTimeout(() => {
            this.$store
              .dispatch(
                "SetCachedViews",
                this.cachedViews.filter((item) => item === "Home")
              )
              .then(() => {
                this.$store.commit("SET_USER_INFO", {});
                this.$store.commit("SET_TOKEN", "");
                this.$cookies.remove("token");
              });
          }, 500);
        })
        .catch(() => {});
    },
    requestGetWeather() {
      $.get({
        // 这里的url不能写到data对象的外面
        url: "https://api.asilu.com/weather_v2/",
        dataType: "jsonp", // 请求方式为jsonp
        success: (data) => {
          if (data.status === "1") {
            this.isShow = true;
            const currTime = new Date().getHours();
            const dailyForecast = data.forecasts[0].casts[0];
            const city = data.forecasts[0].city;
            const daytemp = dailyForecast.daytemp + "℃";
            const nighttemp = dailyForecast.nighttemp + "℃";
            let weathertemp = "";
            let peraturetemp = "";
            if (currTime >= 6 && currTime < 18) {
              weathertemp = dailyForecast.dayweather;
              peraturetemp =
                dailyForecast.nighttemp + "℃~" + dailyForecast.daytemp + "℃";
            } else {
              weathertemp = dailyForecast.nightweather;
              peraturetemp =
                dailyForecast.daytemp + "℃~" + dailyForecast.nighttemp + "℃";
            }
            // const icontemp = 'https://cdn.heweather.com/cond_icon/' + weatherOption.weatherCode[weathertemp] + '.png';
            const icontemp = require(`@/assets/images/qweather/${weatherOption.weatherCode[weathertemp]}.png`);
            this.dataWeather = {
              city,
              daytemp,
              nighttemp,
              weathertemp,
              peraturetemp,
              icontemp,
            };
          } else {
            this.isShow = false;
          }
        },
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss">
#antiknock-header {
  position: relative;
  width: 100%;
  height: 80px;
  // line-height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  // padding: 0px 30px;
  // border: 1px solid red;
  background: url("~@/assets/images/antiknock/header-bg.png");
  background-size: 100% 200%;
  .center-left {
    width: 445px;
    height: 60px;
    position: absolute;
    top: 20px;
    // border: 1px solid red;
    .center-left-l {
      height: 40px;
      padding: 0px 30px 0px 0px;
      border-right: 1px solid #68d8fd;
      img {
        height: 40px;
      }
    }
    .center-left-r {
      height: 40px;
      margin-left: 20px;
      .center-left-r-timing {
        height: 70px;
        line-height: 70px;
        font-size: 28px;
        font-weight: bold;
        color: #25bcf0;
      }
      .center-left-r-day {
        font-size: 14px;
        color: #25bcf0;
        padding: 10px;
      }
    }
  }
  .center-title {
    position: absolute;
    left: 50%;
    top: 0px;
    height: 80px;
    line-height: 80px;
    transform: translateX(-50%);
    font-size: 35px;
    font-weight: bold;
    background-image: linear-gradient(to top, #1183d6, #52ebf5, #1183d6);
    -webkit-background-clip: text;
    color: transparent;
  }
  .center-right {
    position: absolute;
    top: 20px;
    right: 0px;
    width: 445px;
    height: 60px;
    .center-right-l {
      // width: 100%;
      height: 60px;
      margin-right: 20px;
      .center-right-l-city {
        font-size: 24px;
        color: #25bcf0;
        padding: 10px;
      }
      .center-right-l-temp {
        font-size: 28px;
        color: #25bcf0;
      }
      .center-right-l-weather {
        color: #25bcf0;
        padding: 10px;
        span {
          font-size: 14px;
        }
      }
    }
    .center-right-r {
      height: 40px;
      padding: 0px 0px 0px 30px;
      border-left: 1px solid #68d8fd;
    }
  }
}
</style>
